<!-- 
vscode 代码片段的构建
    + 文件-首选项-配置用户代码片段-选择对应的文件类型或者语言类型
    + 配置代码片段
        "代码片段的简单描述(不要使用中文)": {
	    	"prefix": "触发前缀",
            // body 存放的内容为代码片段内容，每行片段为数组的一个元素;
            // 需要处理引号嵌套(转义符);不识别缩进(使用转义符\t)
	    	"body": [
	    		"console.log(1)",
	    		"console.log(2)"
	    	], 
	    	"description": "代码判断的描述"
	    }
    + $1,$2,$3…… 生成的代码判断 光标停留位置和光标的下一个位置

vscode 常用快捷键
        ctrl+D ：先选择一个文本，通过快捷键匹配下一个
        选择第一行 按住alt+shift 选择最后一行 进入列编辑模式
        end 按键快速切换行尾   home 按键快速切换行头

vscode 文件夹图标
        文件-首选项-文件夹图标主题-安装其它文件主题 [推荐Material Icon Theme]
-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        code{
            background-color: #333;
            color: white;
            padding: 2px 6px;
            border-radius: 6px;
            box-shadow: 0 0 2px #999;
        }
        [v-cloak],[v-pre]{
            display: none;
        }
        .loading{
            display: none;
        }
        /* 下一个兄弟元素 */
        [v-cloak] + .loading{
            display: block;
        }
    </style>
</head>
<body>
    <!-- disabled 属于html5规范中的boolean类型属性，定义表示启用功能 -->
    <!-- <input type="text" disabled> -->

    <!-- BFC (Block Formatting Context) : 块格式化上下文 => 构建独立的样式区域，不去影响该区域外部的样式 -->
    <!-- <div style="border:1px solid red;">
        <div style="margin-bottom:40px;border: 1px solid black;">1</div>
    </div>
    <div style="margin-top:20px;border: 1px solid black;">2</div> -->
    
    <!-- display: flow-root; 以无额外样式的方式构建BFC容器 -->
    <!-- <div style="display: flow-root;">
        <div style="margin-bottom:40px;border: 1px solid black;">1</div>
    </div>
    <div style="margin-top:20px;border: 1px solid black;">2</div> -->

    <div id="app">
        <pre v-pre class="note">
        ！！ 指令特性：无痕迹特性==代码开发时标签上的vue语法表达式，在项目运行时会被删除，不会保留

        布尔类型指令：没有取值表达式，定义就表示使用功能
            使用: ＜标签 v-布尔指令名 ＞＜／标签＞
        1、v-pre
            功能：被定义了该指令的标签内部的所有vue模板语法内容都会被vue进行解析-跳过vue解析过程
        2、v-once
            功能：被定义了该指令的标签内部的所有vue模板语法内容只会在第一次加载时被vue进行解析-vue解析过程只执行一次
                  ** 该指令不构建响应式功能
        3、v-cloak：无功能指令 => 通过指令本身的指令特性【无痕迹特性】，完成无副作用的相关操作
                    基于指令的特性完成v-cloak的隐藏操作，是需要手动设置css样式的
        </pre>
        <p v-pre>在vue的容器中通过语法{{ msg }}可以访问msg变量，变量内容是:{{ msg }}</p>
        <p v-pre>在vue的容器中通过语法<code>{{ msg }}</code>可以访问msg变量，变量内容是:{{ msg }}</p>
        <p>在vue的容器中通过语法<code v-pre>{{ msg }}</code>可以访问msg变量，变量内容是:{{ msg }}</p>
        <hr>
        <p v-cloak>info：{{ info }}</p>
        <p v-cloak v-once>v-once - info：{{ info }}</p>
        <p v-cloak v-once v-html=" 'info：'+info "></p>
        <div class="loading">页面加载中……</div>
        <input type="text" v-model="info">
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        setTimeout(() => {
            // 模拟网络延迟
            createApp({
                data(){
                    return {
                       msg:"msg变量",
                       info:"info变量"
                    }
                }
            }).mount("#app");
        }, 5000);
    </script>
</body>
</html>